<template>
    <el-container class="st-width-100-pc st-height-100-pc">
        <el-header style="height: auto;">
            <StElDynamicForm
                  :origin-prop="{inline: true,labelWidth: '100px'}"
                  ref="form"
                  :options="formItems"
                  @change="(form)=>{selectedAppCode = form.appCode}"
                  :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form,data)=>{queryParams = $stObjectTools.clone(data)}}"
            >
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                               @click="toAddPage" size="mini">添加
                    </el-button>
                </template>
            </StElDynamicForm>
        </el-header>
        <el-main>
            <StElTable ref="steltable" :options="columns" @loading="(val)=>{searchLoading = val}" :datas="tableDatas" :query-params="queryParams">
                <template #append>
                    <el-table-column
                            label="操作"
                            width="200">
                        <template #default="{row,column,$index}">
                            <StElButtonGroup :group-param="{row,column,$index}" :operationMoreButtonOptions="{stype: 'link'}" :operations="tableOperations">
                            </StElButtonGroup>
                        </template>
                    </el-table-column>

                </template>
            </StElTable>
            <el-dialog title="预览" width="30%" :visible.sync="previewDialog.visible">
                <MpMaterialNewsPreview
                        :news-item="previewDialog.articles"
                        :show-add-button="false"
                ></MpMaterialNewsPreview>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="previewDialog.visible = false">取 消</el-button>
                </span>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import MpMaterialNewsPreview from '../../../components/mp/MpMaterialNewsPreview.vue'
    import MpUrl from '../../MpUrl.js'
    export default {
        components:{
            MpMaterialNewsPreview,
        },
        name: "PermanentNews",
        computed: {
            tableDatas() {
                if(!this.queryParams.appCode){
                    return null
                }
                return this.$stStringTools.replaceb(MpUrl.PermanentNewsListPage, this.queryParams)
            }
        },
        data(){
            return {
                selectedAppCode: null,
                searchLoading:  false,
                queryParams: {},
                previewDialog:{
                    visible: false,
                    articles: null
                },
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                ],
                columns: [
                    {
                        prop: 'mediaId',
                        label: '媒体id'
                    }
                ],
                tableOperations:[
                    {
                        stype: 'link',
                        label:'删除',
                        requestSuccess: ({groupParam}) => {
                            // 删除当前行，不重新请求
                            this.$refs.steltable.getTableData().splice(groupParam.$index, 1)
                        },
                        action: ({groupParam}) => {
                            return {
                                method: 'delete',
                                url: this.$stStringTools.replaceb(MpUrl.PermanentNewsDelete,{appCode:this.getAppCode(),mediaId: groupParam.row.mediaId}),
                                confirmText: `确定删除 ${groupParam.row.mediaId} 吗`
                            }
                        }
                    },
                    {
                        action:  this.toEditPage,
                        stype: 'link',
                        label: '修改'
                    },
                    {
                        action:  ({groupParam})=>{this.previewDialog.visible = true; this.previewDialog.articles = groupParam.row.content.articles},
                        stype: 'link',
                        label: '预览'
                    },
                ]
            }
        },
        methods:{
            getAppCode(){
                return this.$refs.form.getFormData().appCode
            },
            ensureAppCode() {
                if(!this.getAppCode()){
                    this.$message.error('请选择公众号')
                    return false
                }
                return true
            },
            toAddPage(){
                if(this.ensureAppCode()){
                    this.$router.push({path: MpUrl.router.PermanentMaterialNewsAdd, query: {appCode:this.getAppCode()}})

                }
            },
            toEditPage({groupParam}){
                if(this.ensureAppCode()){
                    this.$router.push({path: this.$stStringTools.replacec(MpUrl.router.PermanentMaterialNewsEdit,{mediaId: groupParam.row.mediaId}), query: {appCode:this.getAppCode()}})

                }
            },
        }
    }
</script>

<style scoped>

</style>